<template>
    <div class="main-comments clearfix">
        <h2 class="title">用户评论</h2>
        <!--我的评论区-->
        <div class="mycomments-area clearfix">
            <div class="person">
                <a href="javascript:">
                    <img v-lazy="'./images/portrait1.jpg'" />
                </a>
                <div class="name">笑心</div>
            </div>

            <form action="javascript:" class="mycomments">
                <textarea class="mycomments-text" maxlength="1000" autocomplete="off" v-model="msg" placeholder="请友好发言哦！"></textarea>
                <input type="submit" value="发布" class="button-release" @click="summit" />
            </form>
        </div>

        <!--全部评论的评论区-->
        <ul class="comments-area">
            <li class="comments clearfix" v-for="(item,index) in commentList" :key="item.commentId">
                <div class="person">
                    <a href="javascript:">
                        <img v-lazy="item.portraitUrl" />
                    </a>
                    <div class="name">{{ item.userName }}</div>
                    <div class="id">{{ item.userId }}</div>
                </div>

                <div class="comment-content">{{ item.comment }}</div>
                <!-- <div class="bu-delete">删除评论</div> -->
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: "",
        };
    },
    props: ["commentList"],
    methods: {
        summit() {
            if (this.msg.trim()) {
                let comment = {
                    commentId: this.commentList.length + 1,
                    userName: "笑心",
                    userId: 20204092,
                    portraitUrl: "./images/portrait1.jpg",
                    comment: this.msg,
                };
                this.$emit("addComment", comment);
            }else{
                alert("评论不能为空")
            }
            this.msg = "";
        },
    },
};
</script>

<style scoped>
/*设置评论区的样式*/
.main-comments {
    width: 1200px;
    margin: 50px auto 0;
}

.title {
    font-size: 18px;
    border-bottom: 1px solid rgb(224, 224, 224);
    padding-bottom: 20px;
}

/*设置我的评论区*/
.mycomments-area {
    margin: 30px 60px 30px;
    border: 1px solid rgb(224, 224, 224);
    padding: 10px 5px;
}
.mycomments-area > * {
    float: left;
}
/*设置头像大小*/
.mycomments-area .person {
    margin-top: 10px;
    margin-left: 50px;
}
.mycomments-area .person img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}
/*设置头像下方名字位置*/
.mycomments-area .person .name {
    margin-top: 15px;
    text-align: center;
}

/*设置输入框样式*/
.mycomments {
    margin-top: 10px;
    margin-left: 30px;
    width: 900px;
}

.mycomments .mycomments-text {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 130px;
    resize: none;
    overflow: auto;
    border: none;
    background-color: rgb(245, 246, 247);
    padding: 5px 10px;
    color: rgb(153, 165, 192);
    text-align: justify;
}

.mycomments .button-release {
    width: 72px;
    height: 36px;
    margin-top: 15px;
    margin-right: 10px;
    float: right;
    border: none;
    background-color: rgb(253, 170, 153);
    border-radius: 20px/50%;
    font-size: 16px;
    color: white;
    transition: background-color 0.1s;
}

/*设置输入框获得焦点时的样式*/
.mycomments .mycomments-text:focus {
    outline-color: rgb(25, 137, 250);
    background-color: white;
    color: #3f3f3f;
}

/*设置按键移入和点击时的样式*/
.mycomments .button-release:hover {
    background-color: rgb(252, 85, 51);
}

.mycomments .button-release:active {
    background-color: rgb(232, 65, 31);
}

/*设置他人评论区内容*/
.comments {
    margin: 0 60px 30px;
    padding: 10px 10px;
    border-bottom: 1px solid rgb(224, 224, 224);
    margin-bottom: 15px;
}
.comments-area .comments > * {
    float: left;
}
/*设置头像大小*/
.comments-area .comments .person {
    margin-top: 10px;
    margin-left: 50px;
}
.comments-area .comments .person img {
    width: 80px;
    height: 80px;
    border-radius: 20px;
}

/*设置头像下方名字位置*/
.comments-area .comments .person .name {
    margin-top: 15px;
    text-align: center;
}
.comments-area .comments .person .id {
    margin-top: 10px;
    text-align: center;
    color: rgb(252, 85, 49);
}

/*设置右方内容区的样式*/
.comments-area .comments .comment-content {
    font-size: 16px;
    margin-top: 20px;
    margin-left: 30px;
    width: 900px;
}
</style>